import React, {useState} from 'react';
import {
  View,
  Button,
  Text,
  TextInput,
  StyleSheet,
  Dimensions,
  Image,
  Modal,
} from 'react-native';
import '../utils/myglobal.js';
import {ethers} from 'ethers';
const imgppp = require('../resources/ppp.jpg');
const imgwood = require('../resources/wood.webp');
import {storeData} from '../utils/storage_utils';
import mystyles from './mystyles';
import InputModal from './InputModel';
var privateKey = global.privateKey;

const wallet = new ethers.Wallet(privateKey);
const address = wallet.address;

const AccountBase = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [userName, setUserName] = useState(
    global.username != undefined ? global.username : '默认名字',
  );

  const handleCloseModal = () => {
    setModalVisible(false);
  };

  const handleOk = text => {
    setUserName(text);
    setModalVisible(false);
    storeData(global.userNameKey, text).then(
      console.log('storage new name ok', userName),
    );
  };

  function doChangeName() {
    setModalVisible(true);
  }
  return (
    <View>
      <InputModal
        visible={modalVisible}
        onCancel={handleCloseModal}
        onOk={handleOk}
        defaultText={userName}
      />
      <View style={{flexDirection: 'row'}}>
        <Image style={{width: 100, height: 100, margin: 2}} source={imgwood} />
        <Text style={mystyles.Title}>{userName}</Text>
      </View>
      <Button title="修改名字" onPress={doChangeName} />

      <Text style={mystyles.SubTitle}>账户地址</Text>
      <Text style={[mystyles.text, {fontSize: 16}]}>{address}</Text>
    </View>
  );
};

export default AccountBase;
